import {
  defineComponent,
  ref,
  resolveDirective,
  withDirectives,
  openBlock,
  createElementBlock,
  createElementVNode,
  unref,
  pushScopeId,
  popScopeId
} from "vue";
import { b as useProp, i as uuid, _ as _export_sfc } from "./index-CEDaTd93.js";
const _withScopeId = n => (
  pushScopeId("data-v-a6d3e741"), (n = n()), popScopeId(), n
);
const _hoisted_1 = { class: "dv-border-box-9" };
const _hoisted_2 = ["width", "height"];
const _hoisted_3 = ["id"];
const _hoisted_4 = /* @__PURE__ */ _withScopeId(() =>
  /* @__PURE__ */ createElementVNode(
    "animate",
    {
      attributeName: "x1",
      values: "0%;100%;0%",
      dur: "10s",
      begin: "0s",
      repeatCount: "indefinite"
    },
    null,
    -1
  )
);
const _hoisted_5 = /* @__PURE__ */ _withScopeId(() =>
  /* @__PURE__ */ createElementVNode(
    "animate",
    {
      attributeName: "x2",
      values: "100%;0%;100%",
      dur: "10s",
      begin: "0s",
      repeatCount: "indefinite"
    },
    null,
    -1
  )
);
const _hoisted_6 = ["stop-color"];
const _hoisted_7 = ["values"];
const _hoisted_8 = ["stop-color"];
const _hoisted_9 = ["values"];
const _hoisted_10 = ["id"];
const _hoisted_11 = ["points"];
const _hoisted_12 = ["points"];
const _hoisted_13 = ["points"];
const _hoisted_14 = ["points"];
const _hoisted_15 = ["points"];
const _hoisted_16 = ["points"];
const _hoisted_17 = ["points"];
const _hoisted_18 = ["points"];
const _hoisted_19 = ["points"];
const _hoisted_20 = ["fill", "points"];
const _hoisted_21 = ["width", "height", "fill", "mask"];
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "BorderBox",
  props: {
    component: {}
  },
  setup(__props) {
    const props = __props;
    const { propValue } = useProp(props.component);
    const width = ref(150);
    const height = ref(150);
    const gradientId = ref(`border-box-9-gradient-${uuid()}`);
    const maskId = ref(`border-box-9-mask-${uuid()}`);
    const resizeHandler = entry => {
      const rect = entry.contentRect;
      width.value = rect.width;
      height.value = rect.height;
    };
    return (_ctx, _cache) => {
      const _directive_resize = resolveDirective("resize");
      return withDirectives(
        (openBlock(),
        createElementBlock("div", _hoisted_1, [
          (openBlock(),
          createElementBlock(
            "svg",
            {
              class: "dv-border-svg-container",
              width: width.value,
              height: height.value
            },
            [
              createElementVNode("defs", null, [
                createElementVNode(
                  "linearGradient",
                  {
                    id: gradientId.value,
                    x1: "0%",
                    y1: "0%",
                    x2: "100%",
                    y2: "100%"
                  },
                  [
                    _hoisted_4,
                    _hoisted_5,
                    createElementVNode(
                      "stop",
                      {
                        offset: "0%",
                        "stop-color": unref(propValue).base.colorLeft
                      },
                      [
                        createElementVNode(
                          "animate",
                          {
                            attributeName: "stop-color",
                            values: `${unref(propValue).base.colorLeft};${
                              unref(propValue).base.colorRight
                            };${unref(propValue).base.colorLeft}`,
                            dur: "10s",
                            begin: "0s",
                            repeatCount: "indefinite"
                          },
                          null,
                          8,
                          _hoisted_7
                        )
                      ],
                      8,
                      _hoisted_6
                    ),
                    createElementVNode(
                      "stop",
                      {
                        offset: "100%",
                        "stop-color": unref(propValue).base.colorRight
                      },
                      [
                        createElementVNode(
                          "animate",
                          {
                            attributeName: "stop-color",
                            values: `${unref(propValue).base.colorRight};${
                              unref(propValue).base.colorLeft
                            };${unref(propValue).base.colorRight}`,
                            dur: "10s",
                            begin: "0s",
                            repeatCount: "indefinite"
                          },
                          null,
                          8,
                          _hoisted_9
                        )
                      ],
                      8,
                      _hoisted_8
                    )
                  ],
                  8,
                  _hoisted_3
                ),
                createElementVNode(
                  "mask",
                  { id: maskId.value },
                  [
                    createElementVNode(
                      "polyline",
                      {
                        stroke: "#fff",
                        "stroke-width": "3",
                        fill: "transparent",
                        points: `8, ${height.value * 0.4} 8, 3, ${
                          width.value * 0.4 + 7
                        }, 3`
                      },
                      null,
                      8,
                      _hoisted_11
                    ),
                    createElementVNode(
                      "polyline",
                      {
                        fill: "#fff",
                        points: `8, ${height.value * 0.15} 8, 3, ${
                          width.value * 0.1 + 7
                        }, 3
              ${width.value * 0.1}, 8 14, 8 14, ${height.value * 0.15 - 7}
            `
                      },
                      null,
                      8,
                      _hoisted_12
                    ),
                    createElementVNode(
                      "polyline",
                      {
                        stroke: "#fff",
                        "stroke-width": "3",
                        fill: "transparent",
                        points: `${width.value * 0.5}, 3 ${
                          width.value - 3
                        }, 3, ${width.value - 3}, ${height.value * 0.25}`
                      },
                      null,
                      8,
                      _hoisted_13
                    ),
                    createElementVNode(
                      "polyline",
                      {
                        fill: "#fff",
                        points: `
              ${width.value * 0.52}, 3 ${width.value * 0.58}, 3
              ${width.value * 0.58 - 7}, 9 ${width.value * 0.52 + 7}, 9
            `
                      },
                      null,
                      8,
                      _hoisted_14
                    ),
                    createElementVNode(
                      "polyline",
                      {
                        fill: "#fff",
                        points: `
              ${width.value * 0.9}, 3 ${width.value - 3}, 3 ${
                          width.value - 3
                        }, ${height.value * 0.1}
              ${width.value - 9}, ${height.value * 0.1 - 7} ${
                          width.value - 9
                        }, 9 ${width.value * 0.9 + 7}, 9
            `
                      },
                      null,
                      8,
                      _hoisted_15
                    ),
                    createElementVNode(
                      "polyline",
                      {
                        stroke: "#fff",
                        "stroke-width": "3",
                        fill: "transparent",
                        points: `8, ${height.value * 0.5} 8, ${
                          height.value - 3
                        } ${width.value * 0.3 + 7}, ${height.value - 3}`
                      },
                      null,
                      8,
                      _hoisted_16
                    ),
                    createElementVNode(
                      "polyline",
                      {
                        fill: "#fff",
                        points: `
              8, ${height.value * 0.55} 8, ${height.value * 0.7}
              2, ${height.value * 0.7 - 7} 2, ${height.value * 0.55 + 7}
            `
                      },
                      null,
                      8,
                      _hoisted_17
                    ),
                    createElementVNode(
                      "polyline",
                      {
                        stroke: "#fff",
                        "stroke-width": "3",
                        fill: "transparent",
                        points: `${width.value * 0.35}, ${height.value - 3} ${
                          width.value - 3
                        }, ${height.value - 3} ${width.value - 3}, ${
                          height.value * 0.35
                        }`
                      },
                      null,
                      8,
                      _hoisted_18
                    ),
                    createElementVNode(
                      "polyline",
                      {
                        fill: "#fff",
                        points: `
              ${width.value * 0.92}, ${height.value - 3} ${width.value - 3}, ${
                          height.value - 3
                        } ${width.value - 3}, ${height.value * 0.8}
              ${width.value - 9}, ${height.value * 0.8 + 7} ${
                          width.value - 9
                        }, ${height.value - 9} ${width.value * 0.92 + 7}, ${
                          height.value - 9
                        }
            `
                      },
                      null,
                      8,
                      _hoisted_19
                    )
                  ],
                  8,
                  _hoisted_10
                )
              ]),
              createElementVNode(
                "polygon",
                {
                  fill: unref(propValue).base.backgroundColor,
                  points: `
          15, 9 ${width.value * 0.1 + 1}, 9 ${width.value * 0.1 + 4}, 6 ${
                    width.value * 0.52 + 2
                  }, 6
          ${width.value * 0.52 + 6}, 10 ${width.value * 0.58 - 7}, 10 ${
                    width.value * 0.58 - 2
                  }, 6
          ${width.value * 0.9 + 2}, 6 ${width.value * 0.9 + 6}, 10 ${
                    width.value - 10
                  }, 10 ${width.value - 10}, ${height.value * 0.1 - 6}
          ${width.value - 6}, ${height.value * 0.1 - 1} ${width.value - 6}, ${
                    height.value * 0.8 + 1
                  } ${width.value - 10}, ${height.value * 0.8 + 6}
          ${width.value - 10}, ${height.value - 10} ${
                    width.value * 0.92 + 7
                  }, ${height.value - 10}  ${width.value * 0.92 + 2}, ${
                    height.value - 6
                  }
          11, ${height.value - 6} 11, ${height.value * 0.15 - 2} 15, ${
                    height.value * 0.15 - 7
                  }
        `
                },
                null,
                8,
                _hoisted_20
              ),
              createElementVNode(
                "rect",
                {
                  x: "0",
                  y: "0",
                  width: width.value,
                  height: height.value,
                  fill: `url(#${gradientId.value})`,
                  mask: `url(#${maskId.value})`
                },
                null,
                8,
                _hoisted_21
              )
            ],
            8,
            _hoisted_2
          ))
        ])),
        [[_directive_resize, resizeHandler]]
      );
    };
  }
});
const BorderBox = /* @__PURE__ */ _export_sfc(_sfc_main, [
  ["__scopeId", "data-v-a6d3e741"]
]);
export { BorderBox as default };
